<template>
    <!-- 精选信用卡 -->
    <div class="madp-credit-card" v-if="list.length > 0">
        <div class="header">
            <span>精选信用卡</span>
            <span class="cursor-pointer" @click="getMore">更多</span>
        </div>
        <div class="container">
            <div class="main">
                <div class="swiper-credit-card">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item, index) in list" :key="index" :data-item="JSON.stringify({ ...item, index })">
                            <img class="swiper-img" :src="item.image1" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="name">{{ list[activeIndex].name }}</div>
        </div>
    </div>
</template>
<script>
    import financialApi from '@/api/financial-shop.js';
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    import mxProductImage from '@/mixin/mxProductImage.js';
    export default {
        mixins: [mxProductImage],
        components: {},
        data() {
            return {
                activeIndex: 0,
                swiper: null,
                list: []
            };
        },
        props: {
            wxUserId: {
                type: String,
                default: ''
            },
            sort: {
                type: Number,
                default: 0
            }
        },
        watch: {
            wxUserId: function () {
                if (this.wxUserId) {
                    this.getProductList();
                }
            }
        },
        created() {},
        mounted() {
            if (this.wxUserId) {
                this.getProductList();
            }
        },
        methods: {
            getMore() {
                this.$sensorsSend('MktClick', {
                    recommend_id: this.$store.state.vuex_wxUserId,
                    $title: '首页',
                    mkt_type: '',
                    mkt_name: '信用卡',
                    mkt_location: this.sort,
                    mkt_content_name: '金融小店',
                    mkt_content_type: '信用卡'
                });
                this.$router.push({
                    path: '/financialShop/picture-list',
                    query: {
                        type: 5,
                        wxUserId: this.wxUserId
                    }
                });
            },
            getProductList() {
                financialApi
                    .getOtherProductList({
                        current: 1,
                        size: 10,
                        status: 1,
                        type: 5,
                        wxUserId: this.wxUserId
                    })
                    .then((res) => {
                        this.list = res.data.data.records;
                        if (this.list.length < 1) return;
                        this.$nextTick(() => {
                            this.swiperCreditCard = new Swiper('.swiper-credit-card', {
                                direction: 'horizontal', // 轮播图轮播方向，horizontal为横向，
                                loop: false, // 循环模式选项
                                spaceBetween: 10, // 左右距离，每一张图之间的间距，不用在css中设置margin了
                                slidesPerView: 'auto', // 默认一个屏幕显示几张图，必须auto！要不轮播到最后一张图时，右侧会是空白，很丑！
                                centeredSlides: true, // 每屏，居中显示
                                autoplay: false, // 自动轮播
                                // 下面两个属性一般是数据从后台请求后或者点击轮播图片跳转页面后，需要初始化swiper
                                observer: true, // 修改swiper自己或子元素时，自动初始化swiper
                                observeParents: true, // 修改swiper的父元素时，自动初始化swiper
                                onClick: (swiper) => {
                                    let item = JSON.parse(swiper.clickedSlide.attributes['data-item'].nodeValue); //转换为对象
                                    this.mxHandleClick(item, item.index);
                                },
                                onSlideChangeEnd: (swiper) => {
                                    //切换结束时，获取slide序号
                                    // _this.swiperIndex = swiper.realIndex + 1 //realIndex: 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将复制的块的数量计算在内。
                                    this.activeIndex = swiper.realIndex;
                                }
                            });
                        });
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-credit-card {
        width: 100%;
        margin-bottom: 16px;
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 8px 0;
            :nth-child(1) {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #2c2c2c;
            }
            :nth-child(2) {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(32, 32, 32, 0.8);
            }
        }
        .container {
            width: 100%;
            background: #ffffff;
            box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
            border-radius: 8px;
            padding: 16px 0;
            overflow: hidden;
            .name {
                margin-top: 8px;
                text-align: center;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #2c2c2c;
            }
        }
        .main {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .swiper-credit-card {
            z-index: 0;
            width: 100%;
            height: 184px;
            position: relative;
            .swiper-wrapper {
                align-items: center;
            }
            .swiper-slide {
                background-position: center;
                background-size: cover;
                width: 85%;
                height: 90%;
                .swiper-img {
                    border-radius: 10px;
                    width: 100%;
                    height: 100%;
                }
            }
            .swiper-slide-active {
                height: 100%;
            }
        }
    }
</style>
